<template>
  <div class="case">
    <ul>
      <li v-for="item in cases" :key="item._id">
        <h2 class="title">{{item.title}}</h2>
        <div class="technology">{{item.technology}}</div>
        <p class="describe">{{item.describe}}</p>
        <div class="footer">
          <div class="time">{{parseFloat(item.date) | dateFormat}}</div>
          <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="removeCase(item._id)"
                     v-if="jurisdiction"></el-button>
          <a class="SourceCode" :href="item.link" target="_blank"></a>
        </div>
      </li>
    </ul>
    <div class="addCase" @click="showCaseVisible=true" v-if="jurisdiction">+</div>

    <!--    添加作品-->
    <el-dialog
      title="添加作品"
      :visible.sync="showCaseVisible"
      width="50%"
      id="cases"
      :modal="false"
      @close="close">

      <el-form ref="caseForm" label-width="100px" class="caseForm" :rules="caseRules" :model="caseForm">
        <el-form-item label="作品名称" prop="title">
          <el-input v-model="caseForm.title"></el-input>
        </el-form-item>
        <el-form-item label="技术栈" prop="technology">
          <el-input v-model="caseForm.technology"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="describe">
          <el-input type="textarea" v-model="caseForm.describe"></el-input>
        </el-form-item>
        <el-form-item label="源码地址" prop="link">
          <el-input v-model="caseForm.link"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="showCaseVisible = false" type="danger">取 消</el-button>
    <el-button type="success" @click="submitCase">发 表</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex'

  export default {
    name: "case",
    data() {
      return {
        caseForm: {
          title: '',
          technology: '',
          describe: '',
          link: ''
        },
        caseRules: {
          title: [{required: true, message: '请输入作品名称', trigger: 'blur'}],
          technology: [{required: true, message: '请输入技术栈', trigger: 'blur'}],
          describe: [{required: true, message: '请输入作品描述', trigger: 'blur'}],
          link: [{required: true, message: '请输入源码地址', trigger: 'blur'}],
        },
        showCaseVisible: false
      }
    },
    created() {
      this.getCases()
    },
    methods: {
      getCases() {
        this.$store.dispatch('getCases')
      },
      removeCase(id) {
        this.$store.dispatch('removeCase', id)
        this.getCases()
      },
      submitCase() {
        this.$refs.caseForm.validate(valid => {
          if (valid) {
            this.$store.dispatch('addCases', this.caseForm)
              .then(()=>{
                this.showCaseVisible = false
              })
            this.getCases()
          } else {
            console.log('error submit!!')
            return
          }
        })
      },
      close() {
        this.$refs.caseForm.resetFields()
      }
    },
    computed: {
      ...mapState(['cases']),
      ...mapGetters(['jurisdiction'])
    }
  }
</script>

<style scoped lang="less">
  .case {
    overflow: hidden;

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        width: 45%;
        background: #222222;
        margin: 10px;
        box-shadow: 0 1px 1px #000 inset, 0 1px 1px #fff;

        .title {
          text-align: center;
          font-size: 20px;
          color: #e6a23c;
          margin: 10px 0;
        }

        .technology {
          text-align: center;
          color: #767676;
        }

        .describe {
          width: 60%;
          margin: 20px auto;
        }

        .footer {
          background: #181818;
          padding: 5px 5px 5px 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .SourceCode {
            width: 40px;
            height: 40px;
            background: url('../assets/img/github.jpg');
            background-size: 100% 100%;
            border-radius: 50%;
          }

          .el-button {
            margin-left: 260px;
          }
        }
      }
    }

    .addCase {
      width: 80px;
      height: 80px;
      background: #222222c9;
      color: #7E7E7E;
      font-size: 60px;
      text-align: center;
      line-height: 80px;
      box-shadow: 0 1px 1px white, 0 1px 1px #000 inset;
      cursor: pointer;
      float: right;
      margin-right: 10px;
      margin-top: 20px;
    }

    .addCase:hover {
      box-shadow: 0 1px 5px white inset;
    }

    .addCase:active {
      box-shadow: 0 1px 1px white, 0 1px 1px #000 inset;
    }
  }
</style>